<template>
  <el-dialog
      v-model="dialogFormVisible"
      @close="handleClose"
      :close-on-click-modal="false"
      :title="title"
      width="90%"
      top="5px"
  >
    <div class="kva-container">
      <div class="kva-contentbox">
        <home-page-header>
          <div class="kva-form-search">
            <el-form class="search-form" :inline="true" :model="queryParams" ref="searchForm">
              <el-form-item prop="keyword">
                <el-button
                    v-if="selectIds.length > 0"
                    type="danger"
                    icon="Delete"
                    style="margin-right: 5px"
                    @click="handleBatchRemove"
                >批量删除
                </el-button
                >
                <el-button
                    v-if="selectIds.length > 0"
                    type="success"
                    icon="Check"
                    style="margin-right: 5px"
                    @click="handleBatchRecover"
                >批量恢复
                </el-button
                >
              </el-form-item>
              <el-form-item prop="uuid">
                <el-input v-model="queryParams.uuid" placeholder="输入用户编号" maxlength="100" clearable/>
              </el-form-item>
              <el-form-item prop="keyword">
                <el-input v-model="queryParams.keyword" placeholder="请输入用户昵称，用户名，手机" maxlength="100" clearable/>
              </el-form-item>
              <el-form-item>
                <el-button type="success" icon="Search" @click.prevent="handleSearch">搜索</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="danger" icon="Refresh" @click.prevent="handleReset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table
              v-loading="tableLoading"
              @selection-change="handleSelectionChange"
              :data="tableData"
              stripe
              border
              height="calc(100vh - 330px)"
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column fixed :label="'总数：' + total" width="150" align="center">
              <template v-slot="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="用户名" prop="userName" align="center"/>
            <el-table-column label="用户昵称" prop="nickName" align="center"/>
            <el-table-column label="用户编号" prop="uuid" align="center"/>
            <el-table-column fixed="right" label="操作" align="center" width="300">
              <template #default="scope">
                <el-button icon="remove" type="danger" @click.stop="handleRemove(scope.row)">彻底删除</el-button>
                <el-button icon="Check" type="success" @click.stop="handleRecover(scope.row)">恢复删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="kva-pagination-box center">
            <el-pagination
                :current-page="queryParams.pageNo"
                :page-size="queryParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </home-page-header>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import KVA from '@/utils/kva.js'
import {
  batchRecovers,
  batchRemoves,
  findPagesRecyle,
  recoverById,
  removeById
} from '@/api/users/index.js'

// 定义响应式得列表数据容器
const tableData = ref([])
const selectIds = ref([])
const tableLoading = ref(false)
const pages = ref(0)
const total = ref(0)
const searchForm = ref({})
// 编辑添加相关
const addRef = ref({})
const emits = defineEmits(['load'])
// 控制弹窗得显示
const dialogFormVisible = ref(false)

// 加载数据
const handleLodeData = async () => {
  tableLoading.value = true
  const resp = await findPagesRecyle(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total * 1
  pages.value = resp.data.pages * 1
}

// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1
  handleLodeData()
}

const queryParams = reactive({
  pageNo: 1,
  pageSize: 30,
  uuid:'',
  keyword: ''
})

// 重置
const handleReset = () => {
  searchForm.value.resetFields()
  handleSearch()
}

// 分页size更改
const handleSizeChange = (size) => {
  queryParams.pageSize = size
  handleLodeData()
}

// 分页pageNo更改
const handleCurrentChange = (pno) => {
  queryParams.pageNo = pno
  handleLodeData()
}

// 彻底删除
const handleRemove = (row) => {
  KVA.confirm('警告', '<strong>您确定要执行此次【彻底删除】操作吗？</strong>', {icon: 'success'}).then(async () => {
    const opid = row.id
    await removeById(opid)
    KVA.notifySuccess('彻底删除成功!')
    handleLodeData()
  })
}

// 恢复删除
const handleRecover = (row) => {
  KVA.confirm('警告', '<strong>您确定要执行【恢复删除】操作吗？</strong>', {icon: 'success'}).then(async () => {
    const opid = row.id
    await recoverById(opid)
    KVA.notifySuccess('恢复成功!')
    handleLodeData()
  })
}

/**
 * 批量删除
 */
const handleBatchRemove = () => {
  if (selectIds.value && selectIds.value.length == 0) {
    KVA.notifyError('请选择一个项进行操作！')
    return
  }

  KVA.confirm('警告', '<strong>您确定要执行此次【批量删除】操作吗？</strong>', {icon: 'success'}).then(async () => {
    const ids = selectIds.value.join(',')
    await batchRemoves(ids)
    KVA.notifySuccess('批量删除成功!')
    handleLodeData()
  })
}

/**
 * 批量恢复
 */
const handleBatchRecover = () => {
  if (selectIds.value && selectIds.value.length == 0) {
    KVA.notifyError('请选择一个项进行操作！')
    return
  }

  KVA.confirm('警告', '<strong>您确定要执行此次【批量恢复】操作吗？</strong>', {icon: 'success'}).then(async () => {
    const ids = selectIds.value.join(',')
    await batchRecovers(ids)
    KVA.notifySuccess('批量恢复成功!')
    handleLodeData()
  })
}

const handleOpen = () => {
  dialogFormVisible.value = true
  handleLodeData()
}

const handleClose = () => {
  dialogFormVisible.value = false
  emits('load')
}

/**
 * 选择删除的元素
 * @param rows
 */
const handleSelectionChange = (rows) => {
  selectIds.value = rows.map((c) => c.id)
}

defineExpose({
  handleOpen
})
</script>
